<template>
  <div class="day8">
    <div class="card">
      <div class="card-header"
        :class="{'animated-bg':loading}"
        id="header"
        v-html="article.header"></div>

      <div class="card-content">
        <h3 class="card-title"
          :class="{'animated-bg':loading,'animated-bg-text':loading}"
          id="title"
          v-html="article.title">
        </h3>
        <p class="card-excerpt"
          id="excerpt">
        <div v-html="article.excerpt"> </div>
        </p>
        <div class="author">
          <div class="profile-img animated-bg"
            id="profile_img"
            v-html="article.profile_img"></div>
          <div class="author-info">
            <strong :class="{'animated-bg':loading,'animated-bg-text':loading}"
              id="name"
              v-html="article.name"></strong>
            <small :class="{'animated-bg':loading,'animated-bg-text':loading}"
              id="date"
              v-html="article.date"></small>
          </div>
        </div>
      </div>
    </div>

    <div class="tips">
      <h4>使用vue 实现无数据时占位，有数据时展示的效果时注意下面这俩情况</h4>
      <div>1、占位元素只有一个，且1换1 // 此时只需在占位时设置元素宽高，通过v-html 等有数据时自然渲染</div>
      <div>2、占位元素有多个，得到数据后会用一个替换这一堆占位 //此时把占位的内容放进数据里而不是template内，得到数据自然就替换掉了</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const article = ref({
  header: '',
  title: '',
  excerpt:
    '<span class="animated-bg animated-bg-text">&nbsp;</span><span class="animated-bg animated-bg-text">&nbsp;</span><span class="animated-bg animated-bg-text">&nbsp;</span>',
  profile_img: '',
  name: '',
  date: '',
})
const loading = ref(true)

function getInfo() {
  setTimeout(() => {
    article.value = {
      header:
        '<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />',
      title: 'Lorem ipsum dolor sit amet',
      excerpt:
        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis',
      profile_img:
        '<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />',
      name: 'John Doe',
      date: 'Oct 08, 2020',
    }
    loading.value = false
  }, 2000)
}

getInfo()
</script>

<style lang="scss">
.day8 {
  background-color: #ecf0f1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  flex-direction: column;

  .card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    width: 350px;

    .card-header {
      height: 200px;
    }

    .card-header img {
      object-fit: cover;
      height: 100%;
      width: 100%;
    }

    .card-content {
      background-color: #fff;
      padding: 30px;

      .card-title {
        height: 20px;
        margin: 0;
      }

      .card-excerpt {
        color: #777;
        margin: 10px 0 20px;
      }

      .author {
        display: flex;
      }

      .profile-img {
        border-radius: 50%;
        overflow: hidden;
        height: 40px;
        width: 40px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .author-info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 10px;
        width: 100px;
      }

      .author-info small {
        color: #aaa;
        margin-top: 5px;
      }
    }

    // 统一设置背景动画
    .animated-bg {
      background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 10%,
        #f6f7f8 20%,
        #f6f7f8 100%
      );
      background-size: 200% 100%;
      animation: bgPos 1s linear infinite;
    }

    .animated-bg-text {
      border-radius: 50px;
      display: inline-block;
      margin: 0;
      height: 10px;
      width: 100%;
    }

    @keyframes bgPos {
      0% {
        background-position: 50% 0;
      }

      100% {
        background-position: -150% 0;
      }
    }
  }
}
</style>